<template>
	<view class="display bottom-tab bottom">
		<view class="display column bottom-tab-item" @click="changeTap(item)" v-for="(item,index) in tabListParent" :key="index">
			<image v-if="curTab==item.id" class="first-img" :src="item.imgOn"></image>
			<image v-if="curTab!=item.id" class="first-img" :src="item.imgOff"></image>
			<text :class="curTab==item.id?'text-position text-on':'text-position'">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"wyg-bottom-tab",
		props:['tabIndex','tabListParent'],
		data() {
			return {
				curTab: 1,
				tabList:[]
			}
		},
		created(){
			this.curTab = new Number(this.tabIndex);
		},
		methods: {
			$redirect(_url){
				uni.redirectTo({
					"url":_url
				})
			},
			
			changeTap(e){
				this.curTab = e.id;
				this.$redirect(e.url);
			}
			
		}
	}
	
</script>

<style lang="scss">
	.bottom-tab{
		@include widthHeight(100%,100rpx);
		@include flex-align-justify(center,space-between);
		@include backG;
		@include border(2rpx,$pageBg,'top')
		left: 0;
		.bottom-tab-item{
			@include width(25%);
			@include flex-align-justify;
			.first-img{
				@include widthHeight(40rpx);
			}
			.text-position{
				@include margin(10rpx,'top');
				@include font($fontSize - 4rpx,$blackColor)
			}
			.text-on{
				color: $themeColor;
			}
		}
	}
</style>
